<template>
  <el-card>
    <el-header> 省分组分项检查统计 </el-header>
    <pure-table :data="tableData" :columns="columns" stripe />
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { listResultByProvinces } from "@/api/aqiMeasuredResult";

defineOptions({
  name: "ProvinceGrouping"
});

const columns: TableColumnList = [
  {
    label: "省编号",
    prop: "provinceId",
    sortable: true
  },
  {
    label: "省简称",
    prop: "provinceAbbr",
    sortable: true
  },
  {
    label: "省名称",
    prop: "provinceName"
  },
  {
    label: "SO₂超标累计",
    prop: "so2Count",
    sortable: true
  },
  {
    label: "CO超标累计",
    prop: "coCount",
    sortable: true
  },
  {
    label: "PM2.5超标累计",
    prop: "pmCount",
    sortable: true
  },
  {
    label: "AQI超标累计",
    prop: "aqiCount",
    sortable: true
  }
];

const tableData = ref([]);

const getTableData = async () => {
  const { data } = await listResultByProvinces();
  // 将省份名称转换为简称
  data.forEach(item => {
    item.provinceAbbr = convertProvinceNameToAbbr(item.provinceName);
  });
  tableData.value = data;
  console.log(tableData.value, "tableData");
};

// 辅助函数：将省份名称转换为简称
function convertProvinceNameToAbbr(provinceName: string): string {
  const provinceMap: { [key: string]: string } = {
    北京市: "京",
    上海市: "沪",
    天津市: "津",
    重庆市: "渝",
    河北省: "冀",
    山西省: "晋",
    辽宁省: "辽",
    吉林省: "吉",
    黑龙江省: "黑",
    江苏省: "苏",
    浙江省: "浙",
    安徽省: "皖",
    福建省: "闽",
    江西省: "赣",
    山东省: "鲁",
    河南省: "豫",
    湖北省: "鄂",
    湖南省: "湘",
    广东省: "粤",
    海南省: "琼",
    四川省: "川",
    贵州省: "贵",
    云南省: "滇",
    陕西省: "陕",
    甘肃省: "甘",
    青海省: "青",
    台湾省: "台",
    内蒙古自治区: "蒙",
    广西壮族自治区: "桂",
    西藏自治区: "藏",
    宁夏回族自治区: "宁",
    新疆维吾尔自治区: "新",
    香港特别行政区: "港",
    澳门特别行政区: "澳"
  };

  // 查找映射关系并返回简称，如果找不到则返回原名称
  return provinceMap[provinceName] || provinceName;
}

onMounted(() => {
  console.log("onMounted");
  getTableData();
});
</script>

<style>
.el-header {
  font-weight: bold;
  color: black;
  font-size: 20px;
  text-align: center;
}
</style>
